<template>
  <swiper class="detail-swiper">
    <swiper-item v-for="item in topImages">
      <img :src="item" alt="">
    </swiper-item>
  </swiper>
</template>

<script>
  import {Swiper, SwiperItem} from 'components/common/swiper'

  export default {
    name: "",
    data() {
      return {}
    },
    props: {
      topImages: {
        type: Array,
        default() {
          return []
        }
      },
      id: {
        type: Number,
        default: 0
      }
    },
    created() {
      // console.log(this.topImages);
      // console.log(this.id);
    },
    computed: {
      goodsType() {
        switch (true) {
          case (this.id >= 1 && this.id <= 4):
            return 'pop'
            break
          case (this.id >= 5 && this.id <= 8):
            return 'news'
            break
          case (this.id >= 9 && this.id <= 12):
            return 'sell'
            break
        }
      }
    },
    components: {
      Swiper,
      SwiperItem
    },
    watch: {
      topImages(newVal) {
        newVal.forEach((item, i) => {
          this.topImages[i] = require("assets/img/home/" + this.goodsType + "/" + item + ".webp")
        })
      }
    }
  }
</script>

<style lang="less" scoped>

  .detail-swiper {
    height: 300px;
    overflow: hidden;
  }

</style>
